<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>
	.col-sm-3 {
		padding-top: 7px;
	}
	.col-sm-8 {
		padding-top: 7px;
	}
</style>

<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-content">
						<form class="form-horizontal m-t" id="signupForm">
						<input id="id" name="id" th:value="${article.id}"  type="hidden">
							<div class="form-group">
								<label class="col-sm-3 control-label">大类：</label>
								<div class="col-sm-8">
									[[${article.bigClass}]]
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">小类：</label>
								<div class="col-sm-8">
									[[${article.smallClass}]]
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">文章标题：</label>
								<div class="col-sm-8">
									[[${article.title}]]
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label" id="span1"></label>
								<div class="col-sm-8">
									<span th:utext="${article.articleIntroduction}"></span>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label" id="span2"></label>
								<div class="col-sm-8">
									<span th:utext="${article.authorIntroduction}"></span>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">列表展示图：</label>
								<div id="uploader" class="wu-example col-sm-8">
									<div class="queueList filled">

									</div>
								</div>
							</div>
							<div class="form-group" id="div1">
								<label class="col-sm-3 control-label">详情展示图：</label>
								<div id="uploader2" class="wu-example col-sm-8">
									<div class="queueList2 filled">

									</div>
								</div>
							</div>
							<div class="form-group" id="div2">
								<label class="col-sm-3 control-label">详情轮播图：</label>
								<div class="wu-example col-sm-8" >
									<ul class="rotationList">

									</ul>
									<!--<div class="rotation rotationChange">+ 添加轮播信息</div>
									<div class="rotationChange2" style="display: none">
										<div class="addBox">
											<input class="rotationName" type="text" placeholder="请填写作者名字" />
											<div class="rotationBox">
												<img class="preview"  src="/img/upload.png" />
												<input id="upload_input" type="file" />
												<input type="hidden" id="base64_pay" />
											</div>
										</div>
										<div class="rotationBtn">
											<div class="rotationSureBtn">确定</div>
											<div class="cancelBtn">取消</div>
										</div>
									</div>-->
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label" id="span3"></label>
								<div class="col-sm-8">
									<span th:utext="${article.articleContent}"></span>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">创建时间：</label>
								<div class="col-sm-8">
									[[${#dates.format(article.createDate, 'yyyy-MM-dd HH:mm:ss')}]]
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">点击量：</label>
								<div class="col-sm-8">
									[[${article.viewCount}]]
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">点赞量：</label>
								<div class="col-sm-8">
									[[${article.goodCount}]]
								</div>
							</div>
							<input id="oldAttachId" name="attachId" type="hidden" th:value="${article.attachId}">
							<input id="oldSecondAttachId" name="secondAttachId" type="hidden" th:value="${article.secondAttachId}">
							<input id="thirdAttachId" name="thirdAttachId" type="hidden" th:value="${article.thirdAttachId}">
							<input id="htmlType" name="htmlType" type="hidden" th:value="detail">
							<input type="hidden" name="bigClass"  id="bigClass" th:value="${article.bigClass}">
						</form>
					</div>
				</div>
			</div>
	</div>
	</div>
	<style>
		.rotationChange{
			color: #00b7ee;
			cursor: pointer;
		}
		.rotationName{
			border: 1px solid #999;
			border-radius: 4px;
			width: 280px;
			line-height: 32px;
			padding: 0 10px;
			font-size: 14px;
			color: #333;
			outline: none;
			background: none;
			margin-bottom: 15px;
		}

		.rotationList{
			padding: 0;
		}

		.rotationList li{
			height: 100px;
			padding-bottom: 20px;
			border-bottom: 1px dashed #f0f0f0;
			list-style: none;
			overflow: hidden;
			margin-bottom: 25px;
		}

		.rotationImg{
			height: 80px;
			float: left;
		}

		.rotationclose{
			float: right;
			height: 18px;
			margin-top: 31px;
			cursor: pointer;
		}

		.rotationList li span{
			width: 120px;
			float: left;
			line-height: 80px;
			color: #333;
			font-size: 14px;
		}

		.rotationBox{
			width: 100px;
			height: 100px;
			position: relative;
		}

		.rotationBox img{
			width: 100%;
			height: 100%;
		}

		.rotationBox input{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			opacity: 0;
		}

		.rotationBtn{
			height: 32px;
			display: flex;
			justify-content: center;
		}

		.rotationBtn div{
			width: 100px;
			line-height: 28px;
			height: 32px;
			background: #00b7ee;
			color: #fff;
			border: none;
			text-align: center;
			border-radius: 4px;
			cursor: pointer;
			margin: 0 10px 20px;
		}

		.rotationBtn .cancelBtn{
			background: #ccc;
		}
	</style>
	<div th:include="include::footer"></div>
	<!----文件控件js--->
	<script type="text/javascript" th:src="@{/js/plugins/webuploader/webuploader.js}"></script>
	<script type="text/javascript" th:src="@{/js/plugins/webuploader/webuploader_demo.js}"></script>
	<script type="text/javascript" th:src="@{/js/plugins/webuploader/webuploader_demo2.js}"></script>
	<script type="text/javascript" th:src="@{/js/lrz.js}"></script>
	<script type="text/javascript" th:src="@{/js/exif.js}"></script>
	<script>
		var bigClass = $("#bigClass").val();
		if(bigClass == '作品展览') {
			/*$("#div1").show();*/
			$("#div2").show();
			$("#span1").html("文章前言：");
			$("#span2").html("文章作者：");
			$("#span3").html("创作过程：");
		}else {
			/*$("#div1").hide();*/
			$("#div2").hide();
			$("#span1").html("文章介绍：");
			$("#span2").html("作者介绍：");
			$("#span3").html("文章内容：");
		}

		$(".rotationChange").click(function () {
			$(".rotationName").val('');
			$(".rotationBox input").val('');
			$(".rotationBox img").attr('src','/img/upload.png');
			$('#base64_pay').val('');
			$(this).hide();
			$(".rotationChange2").show();
		})

		$(".cancelBtn").click(function () {
			$(".rotationChange2").hide();
		})

		$(".rotationBox input").change(function() {
			var up_file = document.getElementById("upload_input").files;
			lrz(up_file[0], {width: 400}, function(res){
				$('#base64_pay').val(res.base64);
			});
			//验证图片格式
			var file = $(".upload_input").val();
			/*
            if(!/.(GIF|JPG|JPEG|PNG|gif|jpeg|png|jpg)$/.test(file)){
                alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
                return false;
            }
            */
			var f = document.getElementById("upload_input").files;
			var filesize = f[0].size;
			//验证图片大小
			var image = new Image();
			image.src = file;
			//将选中符合的图片展示在左侧预览
			var $file = $(this);
			var fileObj = $file[0];
			var windowURL = window.URL || window.webkitURL;
			var dataURL;
			var $img = $(".preview");

			if(fileObj && fileObj.files && fileObj.files[0]){
				dataURL = windowURL.createObjectURL(fileObj.files[0]);
				$img.attr('src',dataURL);
				$(this).parents('.first_day').addClass('current');
			}else{
				dataURL = $file.val();
				var imgObj = $(".preview");
				imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
				imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
			}

		});

		$(".rotationSureBtn").click(function () {
			let name = $(".rotationName").val();
			let base64 = $("#base64_pay").val();
			let src = $(".preview").attr('src');
			if(name == ''){
				parent.layer.alert('请填写作者名字');
				return false
			}
			if(base64 == ''){
				parent.layer.alert('请上传作者相关作品');
				return false
			}
			var result = '<li>'
					+'<span>'+name+'</span>'
					+'<img class="rotationImg"  src="'+src+'" />'
					+'<img class="rotationclose"  src="/img/close.png" />'
					+'<input class="save" type="hidden" value="'+base64+'"  />'
					+'</li>'
			$(".rotationList").append(result);
			$(".rotationChange2").hide();
			$(".rotationChange").show();
		})

		$(".rotationList").on('click','.rotationclose',function(){
			$(this).parents('li').remove();
		})

		loadImageList();

		function loadImageList() {
			var thirdAttachId = $("#thirdAttachId").val();
			if(null != thirdAttachId && "" != thirdAttachId) {
				$.ajax({
					type : "POST",
					url :  ctx+"/common/sysFile/list",
					data : {attachId:thirdAttachId},
					async : false,
					success : function(data) {
						if(data != null && data != '') {
							var html = '';
							$.each(data, function(index,item){
								html += '<li>'
										+'<span>'+this.fileName+'</span>'
										+'<img class="rotationImg"  src="'+this.fileUrl+'" />'
										/*+'<img class="rotationclose"  src="/img/close.png" />'
                                        +'<input class="save" type="hidden" value="'+this.type+'"  />'*/
										+'</li>'
							});
							$(".rotationList").append(html);
						}
					}
				});
			}
		}

	</script>
</body>
</html>
